<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" id="viewportId" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
    <meta name="applicable-device" content="pc,mobile">
    <title><?php echo $global_config['title']; ?></title>
    <meta name="keywords" content="<?php echo $global_config['keywords'];?>" />
    <meta name="description" content="<?php echo $global_config['description'];?>" />
    <link type="text/css" href="__PUBLIC__/Home/css/bootstrap.min.css" rel="stylesheet"/>
    <link type="text/css" href="__PUBLIC__/Home/vendor/webuploader/webuploader.css" rel="stylesheet"/>
    <link type="text/css" href="__PUBLIC__/Home/css/bass.css" rel="stylesheet"/>
    <link type="text/css" href="__PUBLIC__/Home/css/hdft.css" rel="stylesheet"/>
    <link type="text/css" href="__PUBLIC__/Home/css/xy.css" rel="stylesheet"/>

    <script type="text/javascript" src="__PUBLIC__/Home/js/jquery-1.9.1.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/js/bootstrap.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/vendor/webuploader/webuploader.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="xy-wrap">
    <include file="Public/header"/>
    <!--内容 start-->
    <div class="xy-content">
        <div class="connews-bg"></div>
        <div class="con-main minw clearfix">
            <include file="Public/sideBarNews"/>
            <div class="con-txt">
                <form id="J_myform" name="myform" action="<?php echo U('News/photo'); ?>" method="post">
                <div class="sj-txt">
                    <input type="hidden" id="J_photo" name="Photo[photo]" value="" />
                    <p class="sjup-tit">上传图片到图集</p>
                    <p>支持jpg、png,每张图片不超过4M，可多次选择上传，总数不超过10张。</p>
                    <div class="sjup">
                        <span class="sjup-file uploader-list" id="sjupPath"></span>
                        <span class="sjup-btn">
                            <span class="upbtn" id="J_picker">浏览...</span>
                        </span>
<!--                        <span class="sjup-btn">-->
<!--                            <span class="upbtn" id="J_upload">开始上传</span>-->
<!--                        </span>-->
                    </div>
                    <div class="upstate-info" id="J_state" style="display: none;">正在上传，请稍候<span>&bull;&bull;&bull;</span></div>
                    <div class="sj-addimg" id="J_fileList" style="margin-top: 10px;"></div>
                    <div class="sj-form">
                        <div class="cttxt-raw">
                            <span class="intit">标题：</span>
                            <span class="intxt">
                                    <input type="text" name="Photo[title]" class="inframe size2">
                                </span>
                        </div>
                        <div class="cttxt-raw">
                            <span class="intit">上传者姓名：</span>
                            <span class="intxt">
                                    <input type="text" name="Photo[user_name]" class="inframe size3">
                                </span>
                        </div>
                        <div class="cttxt-raw">
                            <p>添加文字</p>
                            <textarea class="inarea style1" name="Photo[content]"></textarea>
                        </div>
                        <div class="sj-submit">
                            <a href="javaScript:void(0);" class="xybtn size1 btn-submit" id="inSubmit">点击上传</a>
                        </div>
                    </div>
                </div>
                </form>
                <!--弹窗-->
                <div class="xypop-wrap" id="xyPopWrap">
                    <div class="xypop" id="xyPop">
                        <a href="javascript:void(0);" class="xypop-close" id="xyPopClose">&times;</a>
                        <div class="xypop-hd">上传照片</div>
                        <div class="xypop-con">
                            <p>恭喜你上传成功！在后台审核通过后自动发布。</p>
                            <div class="xypop-btn">
                                <a class="xybtn btn-submit" id="popSubmit">确定</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容 end-->
    <include file="Public/footer"/>
</div>
</body>
<script type="text/javascript">
    var url = "<?php echo U('News/photoAdd'); ?>";
    $(document).ready(function(){
        $("#inSubmit").on('click', function(){
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data: $("#J_myform").serialize(),
                success: function (data) {
                    if (200 == data.code) {
                        $("#xyPopWrap").show();
                        location.reload();
                        return;
                    } else {
                        alert(data.message);
                        return;
                    }
                },
                error: function() {
                    alert('上传失败!');
                    return;
                }
            });
        });
        $("#popSubmit").on('click', function(){
            $("#xyPopWrap").fadeOut(200);
        });
        $("#xyPopClose").on('click', function(){
            $("#xyPopWrap").fadeOut(200);
        });

        /*上传*/
        var uploaderImg = WebUploader.create({
            auto: true,
            swf: '',
            server: '<?php echo U('News/upload'); ?>',
            pick: '#J_picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            //验证文件总数量, 超出则不允许加入队列
            fileNumLimit: 5,
            //验证文件总大小是否超出限制, 超出则不允许加入队列。
//            fileSizeLimit: 5 * 1024 * 1024,
            //验证单个文件大小是否超出限制, 超出则不允许加入队列
            fileSingleSizeLimit: 5 * 1024 * 1024,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            sendAsBinary: false,
            formData: {}
        });
        uploaderImg.on('fileQueued', function( file ) {
            var $li = $(
                '<span class="addimg-btn" id="'+ file.id + '" >' +
                    '<span class="addbtn">' +
                        '<div class="file-item thumbnail">' +
                            '<img>' +
                        '</div>' +
                    '</span>' +
                '</span>'
                ),
                $img = $li.find('img');
            $("#sjupPath").text(file.name);
            $("#J_fileList").append($li);

            // 创建缩略图
            var thumbnailWidth = 100, thumbnailHeight = 100;
            uploaderImg.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });
        $("#J_upload").click(function() {
            uploaderImg.upload();
        });
        // 文件上传过程中创建进度条实时显示。
        uploaderImg.on('uploadProgress', function (file, percentage) {
            $("#J_state").show();
        });

        // 文件上传失败，显示上传出错。
        uploaderImg.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
        uploaderImg.on('uploadSuccess', function(file, response) {
            if (0 == response.error) {
                var photo = $("#J_photo").val() + '|' + response.url;
                $("#J_photo").val(photo);
            } else {
                alert('上传失败!');
                return false;
            }
        });
        // 完成上传完了，成功或者失败，先删除进度条。
        uploaderImg.on('uploadComplete', function (file) {
            $("#J_state").hide();
        });
    });
</script>
</html>